<template>
    <div class="art-full-height">
        <ElCard class="art-table-card" shadow="never" :style="{ 'margin-top': showSearchBar ? '12px' : '0' }">
            <div class="header">
                <p>订单管理</p>
            </div>
            <el-tabs v-model="tableLayout" class="demo-tabs" @tab-click="handleTabChange">
                <el-tab-pane label="全部订单" name="1">
                    <!-- <recommendedLink :tableData="tableData" :tableLoading="tableLoading" :pageNum="pageNum"
                        :pageSize="pageSize" :pageTotal="pageTotal" @current-change="currentChange"
                        @size-change="sizeChange" @refresh-table="getData" /> -->
                </el-tab-pane>
                <el-tab-pane label="待结算" name="2">
                    <!-- <recommendationRecord :tableData="tableData" :tableLoading="tableLoading" :pageNum="pageNum"
                        :pageSize="pageSize" :pageTotal="pageTotal" @current-change="currentChange"
                        @size-change="sizeChange" @refresh-table="getData" /> -->
                </el-tab-pane>
                <el-tab-pane label="已结算" name="3">
                    <!-- <withdrawalHistory :tableData="tableData" :tableLoading="tableLoading" :pageNum="pageNum"
                        :pageSize="pageSize" :pageTotal="pageTotal" @current-change="currentChange"
                        @size-change="sizeChange" @refresh-table="getData" /> -->
                </el-tab-pane>
            </el-tabs>
            <ArtTable :data="tableData" :loading="tableLoading" :currentPage="pageNum" :pageSize="pageSize"
                :total="pageTotal" @current-change="currentChange" @size-change="sizeChange">
                <template #default>
                    <el-table-column label="驾校信息" prop="storeName">
                        <template #default="scope">
                            <div style="display: flex; align-items: center; ">
                                <!-- <img class="avatar" :src="scope.row.avatar" alt="avatar" /> -->
                                <div>
                                    <div class="user-name">{{ scope.row.storeName }}</div>
                                    <div v-if="scope.row.storeId">ID：{{ scope.row.storeId }}</div>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="套餐名称" prop="productName" align="center" />
                    <el-table-column label="实付金额" prop="orderAmount" #default="scope" align="center">
                        {{ scope.row.orderAmount ? (Number(scope.row.orderAmount) /
                            100).toFixed(2) : '0' }}
                    </el-table-column>
                    <el-table-column label="用户信息" prop="realName" align="center">
                        <template #default="scope">
                            <div style="display: flex; align-items: center;justify-content: center; ">
                                <!-- <img class="avatar" :src="scope.row.avatar" alt="avatar" /> -->
                                <div>
                                    <div v-if="scope.row.memberId">ID：{{ scope.row.memberId }}</div>
                                    <div class="user-name">{{ scope.row.memberName }}</div>
                                    <div v-if="scope.row.userMobile">手机号：{{ scope.row.userMobile }}</div>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="佣金类型" prop="incomeType" align="center" #default="scope">
                        <!-- <div>新购/续费</div> -->
                        {{ productTypeList[scope.row.incomeType] }}
                    </el-table-column>
                    <el-table-column label="佣金比例" prop="commissionRate" align="center" #default="scope">
                        {{ scope.row.commissionRate / 100 }}%
                    </el-table-column>
                    <el-table-column label="佣金金额" prop="incomeAmount" align="center" #default="scope">
                        {{ scope.row.incomeAmount ? (Number(scope.row.incomeAmount) /
                            100).toFixed(2) : '0' }}
                    </el-table-column>
                    <el-table-column label="订单号" prop="orderNo" align="center" />
                    <el-table-column label="下单时间" prop="createTime" align="center" />
                    <el-table-column label="状态" prop="isSettled" align="center" #default="scope">
                        <el-tag :type="getTagType(scope.row.isSettled)">
                            {{ buildTagText(scope.row.isSettled) }}</el-tag>
                    </el-table-column>
                </template>
            </ArtTable>
        </ElCard>
    </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import recommendedLink from './components/recommendedLink.vue'
import recommendationRecord from './components/recommendationRecord.vue'
import withdrawalHistory from './components/withdrawalHistory.vue'
import { getPromoterOrder } from '@/api/agent'

const productTypeList: Record<number, string> = {
    0: '商品佣金',
    1: '班型',
    2: '团队奖励',
    3: '活动奖励'
}

const getTagType = (status: number) => {
    switch (status) {
        case 1:
            return 'success'
        case 0:
            return 'warning'
    }
}

const buildTagText = (status: number) => {
    let text = ''
    if (status === 0) {
        text = '未结算'
    } else if (status === 1) {
        text = '已结算'
    }
    return text
}

const showSearchBar = ref(false)
const tableLayout = ref('1')
const replayKey = ref(1)

const tableData = ref([])
const tableLoading = ref(false)
const pageNum = ref(1)
const pageSize = ref(10)
const pageTotal = ref(0)
const isSettledList = ref<any>([])

const filterEmptyValues = (obj: any) => {
    const result: any = {}
    for (const key in obj) {
        if (obj[key] !== '' && obj[key] !== null && obj[key] !== undefined) {
            result[key] = obj[key]
        }
    }
    return result
}


const getData = async () => {
    try {
        tableLoading.value = true
        const res = await getPromoterOrder(filterEmptyValues({
            pageNum: pageNum.value,
            pageSize: pageSize.value,
            isSettledList: isSettledList.value
        }))
        if (res.code === '0') {
            tableData.value = res.data.list
            pageTotal.value = res.data.total
        }
    } catch { } finally {
        tableLoading.value = false
    }
}

const currentChange = (val: number) => {
    pageNum.value = val
    getData()
}

const sizeChange = (val: number) => {
    pageSize.value = val
    pageNum.value = 1
    getData()
}


const handleTabChange = (e: any) => {
    console.log(e.index, "e===");
    if (e.index === '0') {
        isSettledList.value = []
    } else if (e.index === '1') {
        isSettledList.value = [0]
    } else if (e.index === '2') {
        isSettledList.value = [1]
    }
    replayKey.value = new Date().getTime()
    getData()
}



onMounted(() => {
    getData()
})

</script>
<style lang="scss" scoped>
.header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;

    p {
        font-size: 25px;
    }

    .iconfont-sys {
        color: #3955de;
        margin-left: 30px;
    }

    .plan-link {
        font-size: 15px;
        font-weight: 700;
        margin-left: 10px;
        color: #3955de;
    }
}

.avatar {
    width: 36px;
    height: 36px;
    margin-right: 5px;

    img {
        width: 100%;
        height: 100%;
        border-radius: 8px;
    }
}
</style>